/*
 * @Description: 封装自定义指令插件
 * @Autor: zhangzhanhua
 * @Date: 2021-04-27 16:21:06
 * @LastEditors: zhangzhanhua
 * @LastEditTime: 2021-10-26 10:35:18
 */
const MyDirective = {} // 插件名
export default MyDirective.install = function(Vue, options) {
  // 选择框下拉加载指令
  Vue.directive('selectLoadMore', {
    bind(el, binding) {
      const selectDom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
      selectDom.addEventListener('scroll', function() {
        const isEnd = this.scrollHeight - this.scrollTop <= this.clientHeight
        if (isEnd) {
          binding.value()
        }
      })
    }
  })
  // loadmore 是定义的指令 名称 ， 使用时 用 v-loadmore = "dosomethingFun or data"
  Vue.directive('loadmore', {
    // bind只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
    bind(el, binding) {
      // 获取element-ui定义好的scroll盒子  Select 选择器的下拉盒子
      const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
      SELECTWRAP_DOM.addEventListener('scroll', function() {
        // 判断滚动到底部
        const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
        if (CONDITION) {
          // binding.value 是指令的绑定值，该值可能是字符串，数字、函数
          // binding.value() 表示执行 v-loadmore 绑定的函数
          binding.value()
        }
      })
    }
  })
  // 表格拖动指令
  Vue.directive('tableMove', {
    bind(el, bind) {
      let isDrag = false
      let scrollLeft = 0
      // 鼠标按下事件
      el.onmousedown = function(e) {
        // console.log(el.offsetWidth);
        if (e.button != 0 || e.path[3].tagName == 'THEAD') return // 如果是按下鼠标右键或者是表头就不进行操作
        const tableScroll = el.childNodes[2]; // 表格滚动条所在元素
        // let tableWidth =  Number(el.bodyWidth.split('p')[0]) //表格总宽度
        const curretnWidth = el.offsetWidth // 当前表格可示宽度
        const disX = e.clientX - scrollLeft;
        isDrag = true;
        el.onmousemove = (oel) => {
          if (isDrag) {
            // window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            let moveX = oel.clientX - disX; // 位移
            if (moveX > 0) { // 右侧到顶
              moveX = 0;
            }
            // else if(curretnWidth - moveX >= tableWidth){ //左侧到顶
            // 	moveX = curretnWidth - tableWidth
            // }
            tableScroll ? tableScroll.scrollLeft = -moveX : ''
          }
        }
        // 监听滚动条滚动
        el.childNodes[2].onscroll = (sel) => {
          scrollLeft = -el.childNodes[2].scrollLeft
          if (window.getSelection().toString()) {
            el.onmousemove = null;
          }
        }
      };

      // 鼠标抬起事件
      el.onmouseup = function() {
        // 开关关闭
        isDrag = false;
        el.onmousemove = null
        el.childNodes[2].onscroll = null
      };
      // 鼠标移动事件
      el.onmouseleave = function() {
        // 开关关闭
        isDrag = false;
        el.onmousemove = null
        el.childNodes[2].onscroll = null
      };
    }
  })
  // 元素拖动指令
  Vue.directive('drag', {
    bind(el) {
      const oDiv = el // 当前元素
      // let self = this // 上下文
      // 禁止选择网页上的文字
      // document.onselectstart = function() {
      //     return false
      // }
      oDiv.onmousedown = function(e) {
        const dragDom = e.path ? e.path[0].className : e.target ? e.target.className : 'shipTitle' // 被拖拽元素的类名,兼容火狐
        if (dragDom !== 'shipTitle') return
        // 鼠标按下，计算当前元素距离可视区的距离
        const disX = e.clientX - oDiv.offsetLeft
        const disY = e.clientY - oDiv.offsetTop
        // 计算父元素的宽高
        const parentNode = oDiv.parentNode
        const parentWidth = parentNode.clientWidth
        const parentHeight = parentNode.clientHeight

        document.onmousemove = function(e) {
          // 通过事件委托，计算移动的距离
          const l = e.clientX - disX
          const t = e.clientY - disY

          const left = l + oDiv.clientWidth >= parentWidth ? parentWidth - oDiv.clientWidth : l
          const top = t + oDiv.clientHeight >= parentHeight ? parentHeight - oDiv.clientHeight : t
          // 移动当前元素
          oDiv.style.left = left <= 0 ? 0 : left + 'px'
          oDiv.style.top = top <= 0 ? 0 : top + 'px'
        }
        document.onmouseup = function(e) {
          document.onmousemove = null
          document.onmouseup = null
        }
        // return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
        return false
      }
    }
  })
  // 下拉框获取对象
  Vue.directive('selecttext', {
    inserted(el, binding, vnode) {

    },
    componentUpdated(el, binding, vnode) {
      /**
             * vnode.context--->当前的vm实例
             * binding--->指令传递的值
             */
      const value = vnode.data.model.value
      const paramArr = binding.expression.split(',') // 参数分隔后的数组
      const form = paramArr[0].split('.')[0]
      const key = paramArr[0].split('.')[1]
      const dataOption = vnode.context[paramArr[1].replaceAll(' ', '')]
      if (!paramArr[2]) return
      const dictLabel = paramArr.length === 3 ? key : (paramArr[3]).replace(/'/g, '')
      const dictValue = (paramArr[2]).replace(/'/g, '')
      let nm = ''
      dataOption.some(function(option) {
        if (option[dictValue.replaceAll(' ', '')] === value) {
          nm = option[dictLabel.replaceAll(' ', '')]
          return true;
        }
      })
      // 赋值
      if (paramArr[0].split('.').length === 1) {
        vnode.context[form] = nm
      } else {
        vnode.context[form][key] = nm
      }
    }
  }),
  Vue.directive('hasPermi', {
    inserted(el, binding, vnode) {
      const { value } = binding
      const all_permission = '*:*:*';
      const permissions = window.sessionStorage.getItem('permissions')
      if (value && value instanceof Array && value.length > 0) {
        const permissionFlag = value
        const permissionsArray = permissions.split(',')
        const hasPermissions = permissionsArray.some(permission => {
          return all_permission === permission || permissionFlag.includes(permission)
        })
        // el.style.display = 'none';
        if (!hasPermissions) {
          el.parentNode && el.parentNode.removeChild(el)
        }
      } else {
        throw new Error(`请设置操作权限标签值`)
      }
    }
  })
}
